<template>
  <div>
    <template>
      <el-main>
        <el-row>
          <el-col span="16">
            <el-button @click="handleAdd" icon="el-icon-circle-plus" type="primary">增加</el-button>
            <el-button type="primary">下载列表</el-button>
          </el-col>
          <el-col span="8">
            <el-autocomplete
                class="right-search"
                v-model="state"
                :fetch-suggestions="querySearchAsync"
                placeholder="请输入客户名称"
                @select="handleSelect"
            ></el-autocomplete>
            <el-button @click="searchData" icon="el-icon-search" type="primary">搜索</el-button>
          </el-col>
        </el-row>

      </el-main>
      <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%"
          border>
        <el-table-column
            property="id"
            label="编号"
            align="center"
            width="60">
        </el-table-column>
        <el-table-column
            property="name"
            label="姓名"
            align="center"
            width="120">
        </el-table-column>
        <el-table-column
            property="managerId"
            label="经理"
            align="center"
            width="120">
        </el-table-column>
        <el-table-column
            property="region"
            label="地区"
            align="center">
        </el-table-column>
        <el-table-column
            property="telephone"
            label="电话"
            align="center">
        </el-table-column>
        <el-table-column
            property="fax"
            label="传真"
            align="center">
        </el-table-column>
        <el-table-column
            property="level"
            label="客户等级"
            align="center"
            sortable>
        </el-table-column>
        <el-table-column
            property="satify"
            label="客户满意度"
            align="center"
            sortable>
        </el-table-column>
        <el-table-column
            property="credit"
            label="客户信用度"
            align="center"
            sortable>
        </el-table-column>

        <el-table-column
            property="state"
            label="状态"
            align="center"
            sortable
            width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state === '0'" type="info" value="0">启用</el-tag>
            <el-tag v-if="scope.row.state === '1'"  type="warning" value="1">流失</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            property="operation"
            label="操作"
            align="center"
            width="240">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="warning"
                :disabled="scope.row.state === '1'"
                @click="handleSetCusState(scope.row)">流失警告
            </el-button>
            <el-button size="mini"
                       type="primary"
                       icon="el-icon-edit"
                       circle
                       @click="handleUpdate(scope.row)"></el-button>
            <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="handleDelete(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加或修改用户对话框 -->
      <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="open" width="600px">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经理" prop="managerId">
                <el-input v-model="form.managerId" placeholder="请输入经理ID" maxlength="50"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="地区" prop="region">
                <el-input v-model="form.region" placeholder="请输入地区"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话" prop="telephone">
                <el-input v-model="form.telephone" placeholder="请输入手机号码" maxlength="11"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="传真" prop="fax">
                <el-input v-model="form.fax" placeholder="请输入传真"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户等级">
                <el-select v-model="form.level" placeholder="请选择">
                  <el-option label="五星级" :value="5"/>
                  <el-option label="四星级" :value="4"/>
                  <el-option label="三星级" :value="3"/>
                  <el-option label="二星级" :value="2"/>
                  <el-option label="一星级" :value="1"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户满意">
                <el-select v-model="form.satify" placeholder="请选择">
                  <el-option label="非常满意" :value="10"/>
                  <el-option label="一般满意" :value="7"/>
                  <el-option label="满意" :value="5"/>
                  <el-option label="不满意" :value="2"/>
                  <el-option label="非常不满意" :value="0"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户信用">
                <el-select v-model="form.credit" placeholder="请选择">
                  <el-option label="十级" :value="10"/>
                  <el-option label="九级" :value="9"/>
                  <el-option label="八级" :value="8"/>
                  <el-option label="七级" :value="7"/>
                  <el-option label="六级" :value="6"/>
                  <el-option label="五级" :value="5"/>
                  <el-option label="四级" :value="4"/>
                  <el-option label="三级" :value="3"/>
                  <el-option label="二级" :value="2"/>
                  <el-option label="一级" :value="1"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-radio-group v-model="form.state">
                  <el-radio label="0">正常</el-radio>
                  <el-radio label="1">警告</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
      <!--      分页-->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
        </el-pagination>
      </div>
    </template>
  </div>
</template>

<script>
import {addCustomer, deleteCus, findById, getCustomerList, setCusState, updateCustomer} from "@/api/customer";


export default {
  name: "CustomManageView",
  data() {
    return {
      tableData: [],
      open: false,
      title: '',
      form: {
        name: '',
        managerId: '',
        region: '',
        telephone: '',
        fax: '',
        level: '',
        satisfy: '',
        credit: '',
        state: ''
      },
      // 表单校验
      rules: {
        name: [
          {required: true, message: "姓名不能为空", trigger: "blur"}
        ],
        managerId: [
          {required: true, message: "经理ID不能为空", trigger: "blur"}
        ],
        region: [
          {required: true, message: "地区不能为空", trigger: "blur"}
        ],
        telephone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        fax: [
          {required: true, message: "传真不能为空", trigger: "blur"}
        ],
        level: [
          {required: true, message: "等级不能为空", trigger: "blur"}
        ],
        satisfy: [
          {required: true, message: "满意度不能为空", trigger: "blur"}
        ],
        credit: [
          {required: true, message: "信誉度不能为空", trigger: "blur"}
        ],
        state: [
          {required: true, message: "状态不能为空", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.loadCustomList();
  },
  //预加载数据
  mounted() {
    this.loadCustomList();
  },
  methods: {
    //添加方法
    handleAdd() {
      console.log(321321)
      this.open = true;
      this.title = "添加用户";
    },
    //修改方法
    handleUpdate(row) {
      console.log(row.id)
      findById(row.id).then(response => {
        console.log(response.data)
        this.form = response.data;
        this.open = true;
        this.title = "修改用户";
      });
    },
    //删除方法
    handleDelete(id) {
      deleteCus(id).then(res => {
        if (res.code === 200) {
          this.msgSuccess("删除成功!");
          this.reset();
        } else {
          this.msgError("删除失败!");
        }
      })
    },
    //状态更改
    handleSetCusState(row) {
      let text = row.state === 0 ? "启用" : "停用";
      this.$confirm('确认要"' + text + '""' + row.name + '"客户吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return setCusState({
          id: row.id,
          state: 1
        });
      }).then((response) => {
        if (response.code === 200) {
          this.reset();
          this.msgSuccess(text + "成功");

        } else {
          this.msgError(text + "失败");
        }
      }).catch(function () {
        row.state = (row.state === 0 ? 1 : 0);
      });
    },
    //取消按钮
    cancel() {
      this.open = false;
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id === undefined) {
            addCustomer(this.form).then(res => {
              if (res.code === 200) {
                this.tableData = res.rows;
                this.msgSuccess('提交成功!');
                this.open = false;
                this.reset();
              }
            })
          } else updateCustomer(this.form).then(res => {
            if (res.code === 200) {
              this.msgSuccess('提交成功!');
              this.open = false;
              this.reset();
            }
          })
        }
      });
    },
    //重置页面和表单
    reset() {
      this.form = {}
      this.loadCustomList()
    },
    //加载table
    loadCustomList() {
      getCustomerList().then(res => {
        if (res.rows.state === 0)
          console.log(res)
        this.tableData = res.rows
      })
    }
  }
}

</script>


<style scoped>
.right-search {

}
</style>
